<template>
  <div>
    <el-dialog
      title="项目详情"
      @close="closeDialog"
      :visible.sync="projectDetailDia"
      width="900px"
      :append-to-body="true"
    >
      <el-row class="secondaryTitle secondaryTitleTheme mrT4">
        <span>项目基本信息</span>
      </el-row>
      <div class="mrB30">
        <el-row class="detailInfoItemSty">
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >项目名称：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.projectName || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >施工许可证：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.license || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-row class="detailInfoItemSty">
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >项目状态：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.statusDesc || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >所属区域：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.areaName || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-row class="detailInfoItemSty">
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >所属行业：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.industryName || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >投资类别：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.investmentDesc || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-row class="detailInfoItemSty">
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >工程造价：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.total || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >开工日期：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.startDate || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-row class="detailInfoItemSty">
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >建设周期：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.cycle || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >项目部详细地址：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.address || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-row class="detailInfoItemSty">
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >工程类型：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.typeName || '--'
            }}</span>
          </el-col>
          <el-col :span="12" v-if="isWhUser()" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >是否国企施工项目：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.isStateOwnedConDesc || '--'
            }}</span>
          </el-col>
          <el-col :span="12" v-if="isXiangYangUser()" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >合同签订日：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.contractSignDate || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-row class="detailInfoItemSty">
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >施工地址：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.constructLocation || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >工资发放日：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.salaryDay || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-row class="detailInfoItemSty">
          <el-col :span="12" v-if="isWhUser()" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >施工许可证附件：</span
            >
            <span
              class="gridContent empContentSty color666 fontSizeF"
              v-if="upLoadFileLicense.length > 0"
            >
              <span>已上传</span>
              <el-link @click="toUploadFileLicense">查看</el-link>
              <!-- <span class="seeFile" @click="toUploadFileLicense">查看</span> -->
              <contractEnclosureDialog
                v-if="uploadLicense"
                dialogTitle="施工许可证附件"
                :tableData="upLoadFileLicense"
                @closeDialog="hiddenDialogLicense"
              ></contractEnclosureDialog>
            </span>
            <span class="gridContent empContentSty color666 fontSizeF" v-else
              >未上传</span
            >
          </el-col>
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >开工令：</span
            >
            <span
              class="gridContent empContentSty color666 fontSizeF"
              v-if="upLoadFileOrder.length > 0"
            >
              <span>已上传</span>
              <!-- <span class="seeFile" @click="toUploadFile">查看</span> -->
              <el-link @click="toUploadFile">查看</el-link>
              <contractEnclosureDialog
                v-if="uploadContract"
                dialogTitle="项目开工令"
                :tableData="upLoadFileOrder"
                @closeDialog="hiddenDialog"
              ></contractEnclosureDialog>
            </span>
            <span class="gridContent empContentSty color666 fontSizeF" v-else
              >未上传</span
            >
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <el-row class="secondaryTitle secondaryTitleTheme mrT24">
        <span>建设方信息</span>
      </el-row>
      <div class="mrB30">
        <el-row class="detailInfoItemSty">
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >单位名称：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.pcName || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >统一社会信用代码：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.pcUscc || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-row class="detailInfoItemSty">
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight">
              项目负责人<el-tooltip
                content="Top center"
                placement="top"
                effect="dark"
              >
                <div slot="content">业主单位负责管理该项目的人员</div>
                <i class="icon iconfont iconhuabanfuben"></i> </el-tooltip
              >：
            </span>
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.pcLeader || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >负责人手机号：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.pcLeaderTel || '--'
            }}</span>
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <el-row class="secondaryTitle secondaryTitleTheme mrT24">
        <span>施工方信息</span>
      </el-row>
      <div class="mrB30">
        <el-row class="detailInfoItemSty">
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >单位名称：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.pbName || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >统一社会信用代码：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.pbUscc || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-row class="detailInfoItemSty">
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight">
              项目负责人<el-tooltip
                content="Top center"
                placement="top"
                effect="dark"
              >
                <div slot="content">
                  施工单位负责管理项目的人员，建档后项目账号将发送至负责人手机号
                </div>
                <i class="icon iconfont iconhuabanfuben"></i> </el-tooltip
              >：
            </span>
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.leader || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >负责人手机号：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.leaderTel || '--'
            }}</span>
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <!-- 滁州定制化需求 -->
      <el-row class="secondaryTitle secondaryTitleTheme mrT24">
        <span>项目经理信息</span>
      </el-row>
      <div class="mrB30">
        <el-row class="detailInfoItemSty">
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >项目经理姓名：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.managerName || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >联系方式：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.managerIdcard || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-row class="detailInfoItemSty">
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >项目经理资格证书：</span
            >
            <span
              class="gridContent empContentSty color666 fontSizeF"
              v-if="upLoadFile.length > 0"
            >
              <span>已上传</span>
              <el-link @click="toUploadFileThree()">查看</el-link>
              <!-- <span class="seeFile" @click="toUploadFileThree()">查看</span> -->
              <contractEnclosureDialog
                v-if="uploadContractThree"
                dialogTitle="项目经理资格证书"
                :tableData="managerUpLoadFile"
                @closeDialog="hiddenDialogThree"
              ></contractEnclosureDialog>
            </span>
            <span class="gridContent empContentSty color666 fontSizeF" v-else
              >未上传</span
            >
          </el-col>
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight manFiles"
              >项目经理企业任命文件：</span
            >
            <span
              class="gridContent empContentSty color666 fontSizeF"
              v-if="projectInfo.appointFiles.length > 0"
            >
              <span>已上传</span>
              <el-link @click="toUploadFileFour()">查看</el-link>
              <!-- <span class="seeFile" @click="toUploadFileFour()">查看</span> -->
              <contractEnclosureDialog
                v-if="uploadContractFour"
                dialogTitle="项目经理企业任命文件"
                :tableData="projectInfo.appointFiles"
                @closeDialog="hiddenDialogFour"
              ></contractEnclosureDialog>
            </span>
            <span class="gridContent empContentSty color666 fontSizeF" v-else
              >未上传</span
            >
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <el-row class="secondaryTitle secondaryTitleTheme mrT24">
        <span>劳资专管员信息</span>
      </el-row>
      <div class="mrB30">
        <el-row class="detailInfoItemSty">
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >劳资专管员姓名：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.laborAdmin || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >联系方式：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              projectInfo.laborAdminPhone || '--'
            }}</span>
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <el-row class="secondaryTitle secondaryTitleTheme mrT24">
        <span>合同信息</span>
      </el-row>
      <el-row class="detailInfoItemSty mrB30">
        <el-col :span="24" class="labelWidthSty">
          <span class="gridContent color333 fontSizeF fontWeight"
            >合同附件：</span
          >
          <span
            class="gridContent empContentSty color666 fontSizeF"
            v-if="upLoadFile.length > 0"
          >
            <span>已上传</span>
            <!-- <span class="seeFile" @click="toUploadFileTwo()">查看</span> -->
            <el-link @click="toUploadFileTwo()">查看</el-link>
            <contractEnclosureDialog
              v-if="uploadContractTwo"
              dialogTitle="项目合同附件"
              :tableData="upLoadFile"
              @closeDialog="hiddenDialogTwo"
            ></contractEnclosureDialog>
          </span>
          <span class="gridContent empContentSty color666 fontSizeF" v-else
            >未上传</span
          >
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'projectDetailPage',
  props: ['projectId'],
  data() {
    return {
      isDelFile: false,
      projectInfo: '',
      projectDetailDia: true, //项目详情弹框
      upLoadFile: [], //附件
      uploadContractTwo: false,
      managerUpLoadFile: [], //项目经理证件附件
      fileMarginLeft: '30', //详情文件居左样式
      uploadContract: false,
      uploadContractTwo: false,
      upLoadFileOrder: [],
      upLoadFileLicense: [], //施工许可证附件
      uploadLicense: false,
      isShowTodetail: true,
      uploadContractThree: false,
      uploadContractFour: false,
      // managerUpLoadFile:[]
    }
  },
  created() {
    //项目基本信息
    this.getProjectdetail()
  },
  methods: {
    /**
     * @description: 完善劳资专管员
     */
    improveStaff() {
      this.$router.push({
        name: 'employeeAddJz',
        path: '/home/employee/employeeAddJz',
        query: {
          path: 'projectEmployeeQY',
          name: this.projectInfo.laborAdmin || ' ',
          tel: this.projectInfo.laborAdminPhone || ' ',
          projectId: this.projectInfo.projectId,
          projectName: this.projectInfo.projectName,
          userType: '60',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/employee/projectEmployeeQY',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getProjectdetail() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/initdata',
        data: {
          id: this.projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            var data = response.data.result
            this.projectInfo = data
            this.upLoadFile = data.contractFiles
            this.managerUpLoadFile = data.manFiles
            this.upLoadFileLicense = data.licenseFilesView || []
            this.upLoadFileOrder = data.orFiles || []
          }
        })
        .catch((error) => {
          // this.$message.error("项目信息获取失败");
        })
    },
    closeDialog() {
      let flag = false
      this.$emit('closeDia', flag)
    },
    toUploadFile() {
      this.uploadContract = true
    },
    hiddenDialog() {
      this.uploadContract = false
    },
    toUploadFileTwo() {
      this.uploadContractTwo = true
    },
    hiddenDialogTwo() {
      this.uploadContractTwo = false
    },
    //施工许可证
    toUploadFileLicense() {
      this.uploadLicense = true
    },
    hiddenDialogLicense() {
      this.uploadLicense = false
    },
    // 项目经理资格证书
    toUploadFileThree() {
      this.uploadContractThree = true
    },
    hiddenDialogThree() {
      this.uploadContractThree = false
    },
    // 项目经理企业任命文件
    toUploadFileFour() {
      this.uploadContractFour = true
    },
    hiddenDialogFour() {
      this.uploadContractFour = false
    },
  },
}
</script>

<style lang="less" scoped>
.titleWrap {
  // margin-top: 10px;
  // margin-bottom: 10px;
}
.titleInfo {
  font: 18px/50px Microsoft YaHei;
  &::before {
    display: inline-block;
    width: 4px;
    height: 24px;
    background: #17a487;
    content: '';
    //这个指为正的话 小方块就往上， 为负的话，小方块就往下
    vertical-align: -5px;
    margin-right: 15px;
  }
  .todetail {
    font-size: 12px;
    .todetailUser {
      cursor: pointer;
      color: blue;
    }
  }
}

.labelWidth {
  display: inline-block;
  width: 135px;
  text-align: right;
  font-size: 14px;
  color: #333;
  // padding: 8px 0;
  line-height: 36px;
  float: left;
}

.manFiles {
  line-height: 14px;
  margin-top: -2px;
}

.information {
  display: block;
  font-size: 14px;
  color: #666;
  line-height: 36px;
  // padding: 8px 0;
  margin-left: 135px;
}
.imgStyle {
  margin: 10px 0;
}
.imgStyle li {
  margin-right: 10px;
  &:last-child {
    margin-right: 0;
  }
}

.el-link {
  vertical-align: baseline;
  line-height: 16px !important;
}

.gridContent {
  vertical-align: baseline !important;
}
</style>
